<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<!-- 状态栏占位 -->
		<view :style="{height:statusBarHeight+'px',background: '#fff'}"></view>
		<view class="custom-nav" :style="{height:navBarHeight+'px'}">
			<uni-icons type="left" size="26" class="icon" @click="backHome()"></uni-icons>
		</view>
		<!-- #endif -->
		<view class="dispatchSuccess">
			<image src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-04.png" mode=""></image>
			<view class="successTips">{{successData == 'receivingOrders' ? '接单' : '派单' }}成功</view>
			<view class="wait">{{tips}}</view>
			<view class="btn">
				<view class="success_button button_red" v-if="successData == 'receivingOrders'" @click="communicate">与客户沟通</view>
				<view class="success_button button_white" @click="backHome">返回接单大厅</view>
			</view>
			<view class="tips" v-if="successDays > 1">注意：这是一个多天订单，系统已按天拆分为{{successDays}}个日订单。</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	const successData = ref('')
	const successDays = ref()
	// 下单人id
	const userId = ref()
	const nickName = ref()
	const avatar = ref()
	const tips = ref('')
	const statusBarHeight = ref()
	const menuButtonInfo = ref()
	const navBarHeight = ref()
	onLoad((params) => {
		successData.value = params.type || 'receivingOrders'
		successDays.value = params.serviceDays 
		userId.value = params.id
		nickName.value = params.userNickName
		avatar.value = params.userAvatar
		tips.value = params.type == 'receivingOrders' ? '为了更好的完成服务，您可以在上门服务前， 与客户确认一些注意事项等。' : '请耐心等待陪宠师接单。'
		
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		menuButtonInfo.value = uni.getMenuButtonBoundingClientRect()
		//然后计算出navBarHeight
		navBarHeight.value = (menuButtonInfo.value.bottom - statusBarHeight.value) + (menuButtonInfo.value.top - statusBarHeight.value) //状态栏与胶囊按钮中的空隙
	})
	
	const communicate = () => {
		uni.navigateTo({
			url: `/pages/im/message/index?id=${userId.value}&username=${nickName.value}&avatar=${avatar.value}`
		})
	}
	
	const backHome = () => {
		uni.redirectTo({
		  url: `/pages/myStudio/index/index?currentPages=1&type=8`
		})
	}
</script>

<style lang="scss" scoped>
	.custom-nav {
		display: flex;
		align-items: center;
		background-color: #fff;
		.icon{
			font-weight: bold;
			margin-left: 16rpx;
		}
	}
	.dispatchSuccess{
		height: 100%;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 0 48rpx;
		box-sizing: border-box;
		image{
			width: 96rpx;
			height: 96rpx;
			padding-top: 120rpx;
		}
		.successTips{
			font-size: 40rpx;
			font-weight: bold;
			color: #1B2120;
			margin: 40rpx 0;
		}
		.wait{
			font-size: 30rpx;
			color: #5C5E5E;
			margin-top: 30rpx;
			width: 600rpx;
		}
		.btn{
			width: 100%;
			margin-top: 110rpx;
			.success_button:last-child {
				margin-bottom: 0 !important;
			}
			.success_button {
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				border-radius: 88rpx;
				font-size: 28rpx;
				margin-bottom: 32rpx;
			}
			.button_red {
				background: linear-gradient( 90deg, #FF6188 0%, #FF5252 100%);
				color: #FFFFFF
			}
			.button_white {
				background: #FFFFFF;
				border: 2rpx solid #FF6084;
				color: #FF6084;
			}
		}
		.tips{
			margin-top: 48rpx;
			font-size: 26rpx;
			color: #5C5E5E;
		}
	}
</style>